<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>小米商城-个人中心</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <style type="text/css">
        .waaibiankuang {
            position: absolute;
            top: 0%;
            left: 0%;
            display: none;
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999
        }

        .neibiankuang {
            position: absolute;
            left: 35%;
            border-radius: 8px;
            width: 30%;
            background-color: #fff;
        }

        #editUserInfo:hover {
            cursor: pointer;
        }

        .edit_name {
            width: 80px;
            float: left;
            display: inline-block;
            margin-bottom: .5rem;
            margin-left: 18px;
            line-height: 38px;
        }

        .edit_input {
            float: left;
            display: block;
            width: 60%;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: .25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn {
            cursor: pointer;
            -webkit-appearance: button;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            float: right;
            user-select: none;
            border: 1px solid transparent;
            padding: .375rem .75rem;
            font-size: 1rem;
            margin-right: 20px;
            line-height: 1.5;
            border-radius: .25rem;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn_close {
            margin-right: 20px;

        }

        .edit_btn_commit {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
        }
    </style>
</head>
<body>
<div style="margin: 0 auto; width: 1226px;">
    <!-- start header -->
		<@common.header/>
    <!--end header -->
    <!-- start banner_x -->
		<@common.banner_x/>
    <!-- end banner_x -->
    <!-- self_info -->
    <div class="grzxbj">
        <div class="selfinfo center">
            <div class="lfnav fl" style="margin-top: 2%;">
                <div class="ddzx">订单中心</div>
                <div class="subddzx">
                    <ul>
                        <li><a href="/order/getByUserEmail">我的订单</a></li>

                    </ul>
                </div>
                <div class="ddzx">个人中心</div>
                <div class="subddzx">
                    <ul>
                        <li><a href="/user/selfInfo" style="color:#ff6700;font-weight:bold;">我的个人中心</a></li>
                        <li><a href="">消息通知</a></li>
                        <li><a href="/user/address">收货地址</a></li>
                    </ul>
                </div>
            </div>
            <div class="rtcont fr" style="margin-top: 2%;">
                <div class="grzlbt ml40">我的资料
                    <span id="editUserInfo" style=" color: #ff6700; float: right; margin-right: 6%;">编辑</span>
                </div>


			<#if Session["current_user"]?exists>
			<div class="subgrzl ml40"><span>姓名</span><span id="username">${current_user.userName}</span></div>
			<div class="subgrzl ml40"><span>邮箱</span><span id="userEmail">${current_user.userEmail}</span></div>
			<div class="subgrzl ml40"><span>手机号</span><span id="userPhone">${current_user.phone}</span></div>
			<div class="subgrzl ml40"><span>密码</span><span>************</span></span></div>
			<div class="subgrzl ml40"><span>个性签名</span><span id="personSign">${current_user.personSign}</span></div>
			<div class="subgrzl ml40"><span>我的爱好</span><span id="userFavorite">${current_user.favorite}</span></div>

            <#else >
			<div class="subgrzl ml40"><span>昵称</span><span>请先登录</span><span><a href="">编辑</a></span></div>
            </#if>
            </div>
            <div class="clear"></div>
        </div>
    </div>

    <div id="">
        <div class="bg-model waaibiankuang">
            　　
            <div class='content neibiankuang'>
                <div style=" display: flex;align-items: flex-start;justify-content: space-between;padding: 1rem;border-bottom: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                    <h4 style="margin-bottom: 0; line-height: 1.5;font-size: 1.5rem;" id="gridSystemModalLabel">修改个人资料</h4>
                </div>
                <div style=" margin-top:30px;height: 42px">
                    <label id="" class="edit_name">收&nbsp;&nbsp;件&nbsp;&nbsp;人：</label>
                    <input type="text" class="edit_input" id="receiver_name" name="receiverName">
                </div>

                <div style=" margin-top:30px;height: 42px">
                    <label id="" class="edit_name">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
                    <input type="text" style="background-color: #e7eaec!important;" disabled="disabled" class="edit_input"
                           id="receiver_email" name="receiverName">
                </div>

                <div style=" margin-top:30px;height: 42px">
                    <label id="" class="edit_name">手&nbsp;&nbsp;机&nbsp;&nbsp;号：</label>
                    <input type="text" class="edit_input" id="receiver_phone" name="receiverName">
                </div>

                <div style=" margin-top:30px;height: 42px">
                    <label id="" class="edit_name">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                    <input type="text" disabled="disabled" style="background-color: #e7eaec!important;" class="edit_input"
                           id="receiver_password" name="receiverName">
                </div>

                <div style=" margin-top:30px;height: 42px">
                    <label id="" class="edit_name">个性签名：</label>
                    <input type="text" class="edit_input" id="receiver_sing" name="receiverName">
                </div>

                <div style=" margin-top:30px;height: 42px">
                    <label id="" class="edit_name">爱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好：</label>
                    <input type="text" class="edit_input" id="receiver_favorite" name="receiverName">
                </div>


                <div style="height: 20px; justify-content: space-between;padding: 1rem;border-top: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                    <button type="button" id="editSubmit" class="edit_btn edit_btn_commit" data-dismiss="modal">修改</button>
                    <button type="button" class="edit_btn edit_btn_close" id="close">关闭</button>
                </div>
                　　
            </div>
        </div>
    </div>
    <!-- self_info -->
		<@common.footer/>
</div>
</body>

<script type="text/javascript" src='/js/jquery-3.3.1.js'></script>
<script type="application/javascript">
    $(document).ready(function () {

        // 点击显示模态框
        $("#editUserInfo").click(function () {
            $(".bg-model").fadeTo(300, 1)
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});
            // 填充数据
            $("#receiver_name").val($("#username").html())
            $("#receiver_email").val($("#userEmail").html())
            $("#receiver_phone").val($("#userPhone").html())
            $("#receiver_password").val("**************")
            $("#receiver_sing").val($("#personSign").html())
            $("#receiver_favorite").val($("#userFavorite").html())
        });

        //模态框OK按钮点击事件
        $("#close").click(function () {
            $(".bg-model").hide();
            //显示窗体的滚动条
            $("body").css({"overflow": "visible"});
        }).hover(function () {
            $(this).css({"backgroundColor": "#8CC8C8"});
        }, function () {
            $(this).css({"backgroundColor": "#8CD4E6"});
        });

        // 修改个人信息
        $("#editSubmit").click(function () {
            var name = $("#receiver_name").val()
            var email = $("#receiver_email").val()
            var phone = $("#receiver_phone").val()
            var sign = $("#receiver_sing").val()
            var favorite = $("#receiver_favorite").val()
            $.ajax({
                url: '/user/updateUserInfo?name=' + name + '&email=' + email + '&phone=' + phone + '&sign=' + sign + '&favorite=' + favorite,
                success: function (result) {

                    console.log(result)
                    if (result.status == 0) {
                        window.location.href = '/user/selfInfo'
                        return;
                    }
                    if (result.status == -100) {
                        alert("更新失败");
                        return;
                    }
                }
            })
        })


    });


</script>
</html>